<template>
  <div class="main">
    <div style="padding:20px">
      <div v-for="(val, key) in list" :key="key">
        <div class="contain" v-if="typeIndex===(key+1)">
          <div
            class="top"
            style="background: url('https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/evaluation.png') no-repeat; background-size: 100% 100%;"
          >
            <div class="number">
              <span class="current">{{typeIndex}}</span>
              <span class="totalQuestion">/ {{list.length}}</span>
            </div>
          </div>
          <div class="middle">
            <div class="question">
              <p></p>
              <span>{{val.name}}</span>
            </div>
            <div class="answer">
              <ul>
                <li
                  v-for="(item, index) in val.answers"
                  :key="index"
                  :style="{marginBottom:index+1===val.answers.length?'0':'10px'}"
                  :class="{picker:true,'picker-active':currentIndex==index}"
                  @click="clickAnswer(item,index)"
                >{{item.answers}}</li>
              </ul>
            </div>
          </div>
          <div class="footer">
            <div class="fist" @click="lastQuestions(key+1)">上一题</div>
            <p>|</p>
            <div class="last" @click="nextQuestions(key+1)">{{nextQuestion}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { testQuestions, answerQuestions } from "@/api/api";
export default {
  props: {},
  data() {
    return {
      typeIndex: 1,
      // currentQuestion: 1,
      // totalQuestion: 5,
      answer: [],
      currentIndex: -1,
      nextQuestion: "下一题",
      list: [],
      score: 0,
      resData: {}
    };
  },
  computed: {},
  created() {},
  mounted() {
    Object.assign(this.$data, this.$options.data());
  },
  onShow() {
    this.typeIndex = 1;
    this.testQuestions();
  },
  watch: {},
  methods: {
    /** 题目 */
    async testQuestions() {
      await testQuestions().then(res => {
        if (!res.code) {
          this.list = [...res];
          console.log(this.list);
          this.$forceUpdate();
        }
      });
    },
    // 点击回到上一个测试题
    lastQuestions(key) {
      this.score -= this.resData.score;
      if (key === 1) {
        return false;
      } else {
        // this.typeIndex = key - 1;
        this.typeIndex--;
        this.currentIndex = -1;
      }
      this.nextQuestion = "下一题";
    },
    // 点击获取下一个测试题
    nextQuestions(key) {
      if (this.currentIndex === -1) {
        wx.showToast({
          title: "请先选择您的答案",
          icon: "none",
          duration: 1000
        });
        return false;
      }
      //  this.typeIndex = key + 1;
      this.typeIndex++;
      if (this.typeIndex === this.list.length) {
        this.nextQuestion = "提交";
      } else {
        this.nextQuestion = "下一题";
      }
      this.score += this.resData.score;
      if (this.typeIndex > this.list.length) {
        answerQuestions({ score: this.score }).then(res => {
          if (!res.code) {
            wx.navigateTo({
              url:
                "/pages/PersonalCenter/userChildren/evaluation/evaluationResult/main?level=" +
                res
            });
          }
        });
      }

      this.currentIndex = -1;
    },
    // 点击选中问题的选项
    clickAnswer(item, index) {
      this.resData = item;
      // 这里我们传入一个当前值
      this.currentIndex = index;
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.main {
  // padding: 0 25px 58px;
  background: rgba(243, 247, 248, 1);
  box-shadow: 0px 4px 25px 0px rgba(2, 6, 4, 0.08);
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: auto;
  .contain {
    // margin-top: 45px;
    border-radius: 10px;
    background-color: #fff;
  }
  .top {
    height: 152px;
    overflow: hidden;
    .number {
      margin: 26px 0 0 30px;
      .totalQuestion .current {
        font-family: PingFangSC-Medium, PingFangSC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
      .current {
        font-size: 44px;
        line-height: 62px;
      }
    }
  }
  .middle {
    .question {
      padding: 8px 15px 0;
      margin-bottom: 20px;
      background: #fff;
      display: flex;
      // justify-content: center;
      overflow: hidden;
      p {
        width: 5px;
        height: 17px;
        background: linear-gradient(
          360deg,
          rgba(255, 255, 255, 1) 0%,
          rgba(53, 181, 175, 1) 100%
        );
        border-radius: 3px;
        margin: 5px 10px 0 0;
      }
      span {
        // width: 280px;
        // height: 66px;
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFangSC;
        font-weight: 500;
        color: rgba(2, 6, 4, 1);
        line-height: 22px;
      }
    }
    .answer {
      margin: 10px 20px 15px 30px;
      background: rgba(255, 255, 255, 1);
      ul {
        overflow: hidden;
        box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
        .picker {
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
          border-radius: 2px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFangSC;
          font-weight: 400;
          color: rgba(2, 6, 4, 1);
          line-height: 40px;
          text-indent: 12px;
        }
        .picker-active {
          border: 1px solid rgba(24, 119, 152, 1);
          color: rgba(24, 119, 152);
        }
      }
    }
  }
  .footer {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
    display: flex;
    border-radius: 0 0 10px 10px;
    justify-content: center;
    align-items: center;
    p {
      width: 1px;
      height: 30px;
      background: rgba(230, 231, 227, 1);
      line-height: 30px;
    }
    div {
      padding: 0 60px 0 58px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFangSC;
      font-weight: 400;
      color: rgba(2, 6, 4, 1);
      background: rgba(255, 255, 255, 1);
      line-height: 49px;
    }
    .fist {
      // border-radius: 0 0 20px 20px;
      color: rgba(184, 186, 185, 1);
    }
  }
}
</style>
